<template>
	<view>
		<view class="bg-container"></view>
		<view class="wallet-container">
			<view class="wallet-balance">
				<text class="title">账户余额(元)</text>
				<text class="balance">{{account?.amount || '0.00'}}</text>
			</view>
			<view class="wallet-bottom">
				<view class="wallet-dj">
					<text class="title">冻结中(元)</text>
					<text class="dj">{{account?.freezeAmount || '0.00'}}</text>
				</view>
				<view class="wallet-tx">
					<text class="title">可提现</text>
					<text class="tx">{{account?.withdrawAmount || '0.00'}}</text>
				</view>
			</view>
			<view class="wallet-footer">
				<u-button @click="handleWidthdrawOpen" class="wallet-btn" customStyle="flex: 1;height: 88rpx;border-radius: 44rpx;background-color: #fefae7;color: #333;font-size: 28rpx;">提现</u-button>
				<!-- <view style="width: 24rpx;"></view> -->
				<!-- <u-button customStyle="flex: 1;height: 88rpx;border-radius: 44rpx;background-color: #1c1c1e;color: #fff;font-size: 28rpx;">转入</u-button> -->
			</view>
			<image class="wallet-bg" src="../../static/account/bg.png"></image>
		</view>
		<!-- 钱包明细 -->
		<view class="wallet-detail">
			<view class="header">钱包明细</view>
			<view class="empty" v-if="accountInOut.length === 0">
				<image class="empty-img" src="https://static.wddzq.com/static/kong.png"></image>
				<view class="empty-text">暂无数据～</view>
			</view>
			<view class="detail-list">
				<view class="detail-item" v-for="item in accountInOut">
					<image :src="item.inOutType === 1 ? 'https://static.wddzq.com/static/in.png' : 'https://static.wddzq.com/static/out.png'"></image>
					<view class="detail-info">
						<text class="detail-title">{{item.sourceName}}</text>
						<text class="detail-des">{{item.date}}</text>
					</view>
					<view class="detail-account">
						<text class="detail-amount" :class="item.inOutType === 1 ? 'zheng' : 'fu'">{{item.inOutType === 1 ? '+' : '-'}} {{item.amount || '0.00'}}</text>
						<text>{{item.statusName}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 提现 -->
		<u-modal :show="showWithdraw" :showConfirmButton="false">
			<view class="slot-content" style="position: relative;">
				<view class="modal-close" @click="handleWidthdrawClose">
					<u-icon name="close" size="28"></u-icon>
				</view>
				<view class="modal-title">提现金额</view>
				<view class="modal-money">
					<text>可用金额：</text>
					<text>¥ {{account.withdrawAmount || '0.00'}}</text>
				</view>
				<view class="modal-input">
					<text>¥</text>&nbsp;
					<u--input border="none" :value="money" @input='handleWithdrawChange' :placeholder="'提现' + (account.withdrawAmount || '0.00') + '元'"></u--input>
					<view class="modal-tx" @click="handleAll">全部</view>
				</view>
				<view class="modal-tip">发起提现申请后，资金将会自动提现至您的微信钱包。</view>
				<view class="modal-tip2">不支持给非实名用户打款</view>
				<view class="modal-tip2">单笔提现金额上限为200元</view>
				<view class="modal-tip2">微信支付存在0.6%的手续费，在提现时扣除</view>

				<view style="padding: 0;">
					<u-button customStyle="height: 88rpx;border-radius: 44rpx;margin-top: 64rpx;" color="#1c1c1e" text="确定" @click="handleSubmit"></u-button>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import { getUserAccount, commitWithdrawAudit, getUserAccountInOutPage } from '../../config/api.js';
	import { to } from '../../config/utils.js';

	export default {
		data() {
			return {
				account: {},
				accountInOut: [],
				// 提现
				showWithdraw: false,
				money: '',
			}
		},
		onReady() {
			this.fetchUserAccount();
			this.fetchUserAccountInOutPage();
		},
		methods: {
			handleWidthdrawOpen() {
				this.showWithdraw = true;
			},
			handleWidthdrawClose() {
				this.showWithdraw = false;
			},
			// 提现
			handleWithdrawChange(value) {
				this.money = value;
			},
			handleAll() {
				this.money = this.account?.withdrawAmount || 0.00;
			},
			async handleSubmit() {
				if(parseFloat(this.money) <= 0) {
					return uni.showToast({
						title: '金额必须大于零！',
						icon: 'error'
					})
				}
				const [err, data] = await to(commitWithdrawAudit({ withdrawAmount: parseFloat(this.money) }));
				if(err) {
					return uni.showToast({
						title: err?.msg || '提现失败',
						icon: 'none'
					})
				}
				if(data.success) {
					uni.showToast({
						title: '提现成功',
					})
					this.money = '';
					this.showWithdraw = false;
				} else {
					return uni.showToast({
						title: data?.msg || '提现失败',
						icon: 'none'
					})
				}
			},
			// 获取账户信息
			async fetchUserAccount() {
				const [err, data] = await to(getUserAccount());

				if(err) return;
				if(data?.success) {
					this.account = data?.data || {};
				} else {
					uni.showToast({
						title: data?.msg || '获取账户信息失败',
						icon: 'none'
					})
				}
			},
			// 获取提现信息
			async fetchUserAccountInOutPage() {
				const [err, data] = await to(getUserAccountInOutPage());

				if(err) return;
				if(data?.success) {
					this.accountInOut = data?.data?.records || [];
				} else {
					uni.showToast({
						title: data?.msg || '获取提现信息失败',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style>
.bg-container {
	height: 484rpx;
	background-color: #f6d235;
}
.wallet-container {
	background-color: #fff;
	border-radius: 18rpx;
	margin: 24rpx;
	margin-top: -300rpx;
	padding: 24rpx;
	position: relative;
}
.wallet-balance {
	display: flex;
	flex-direction: column;
}
.title {
	font-size: 28rpx;
	color: #aaa;
	margin-bottom: 24rpx;
}
.balance {
	font-size: 48rpx;
	color: #333;
}

.wallet-bottom {
	display: flex;
	margin-top: 48rpx;
}
.wallet-dj {
	margin-right: 116rpx;
	display: flex;
	flex-direction: column;
}
.dj {
	font-size: 36rpx;
	color: #f73d00;
}

.wallet-tx {
	display: flex;
	flex-direction: column;
}
.tx {
	font-size: 36rpx;
	color: #333;
}
.wallet-footer {
	display: flex;
	margin-top: 48rpx;
}

.wallet-btn {
	flex: 1;
}

.wallet-detail {
	background-color: #fff;
	border-radius: 18rpx;
	margin: 24rpx;
	padding: 24rpx;
}
.header {
	font-size: 32rpx;
	color: #333;
}

.detail-list {}
.detail-item {
	display: flex;
	align-items: center;
	padding: 24rpx 0;
	border-bottom: 1rpx solid #ddd;
}
.detail-item image {
	width: 74rpx;
	height: 74rpx;
	margin-right: 12rpx;
}
.detail-info {
	display: flex;
	flex: 1;
	flex-direction: column;
}
.detail-title {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 10rpx;
}
.detail-des {
	font-size: 24rpx;
	color: #aaa;
}
.detail-account {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	font-size: 24rpx;
	color: #aaa;
}

.detail-amount {
	font-size: 28rpx;
	font-weight: bold;
}
.detail-amount.zheng {
	color: #333;
}
.detail-amount.fu {
	color: #f73d00;
}

.wallet-bg {
	position: absolute;
	right: 82rpx;
	top: 128rpx;
	width: 136rpx;
	height: 110rpx;
}


.empty {
	display: flex;
	align-items: center;
	flex-direction: column;
}
.empty-img {
	width: 150rpx;
	height: 150rpx;
	margin-top: 50rpx;
	margin-bottom: 26rpx;
}
.empty-text {
	font-size: 28rpx;
	color: #666;
}


/* 弹窗 */
.modal-close {
	position: absolute;
	top: -60rpx;
	right: -60rpx;
	width: 80rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.modal-img {
	position: absolute;
	top: -250rpx;
	left: 0;
	width: 200rpx;
	height: 250rpx;
}
.modal-title {
	font-size: 28rpx;
	text-align: center;
	font-weight: bold;
	color: #000;
}

.modal-money {
	margin-bottom: 30rpx;
	margin-top: 48rpx;
}
.modal-money text {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
}

.modal-input {
	border-bottom: 1rpx solid #DDDDDD;
	margin-top: 24rpx;
	display: flex;
	align-items: center;
	padding-bottom: 32rpx;
}
.modal-input text {
	font-size: 48rpx;
	color: #333;
	font-weight: bold;
}
.modal-input .modal-tx {
	font-size: 28rpx;
	color: #0074FC;
}

.modal-tip {
	font-size: 24rpx;
	color: #aaa;
	margin-bottom: 8rpx;
}
.modal-tip2 {
	font-size: 24rpx;
	color: red;
}

</style>
